<template>
	<view class="content">
		<banner />
		<category />
		<view class="list">
			<template v-for="item in commodityList">
				<view class="list-item" @click="goDetails(item.id)">
					<img class="img" :src="item.imgUrl" alt="" />
					<view class="goods-name">
						<span class="tag">旗舰店</span>
						<span class="name">{{item.name}}</span>
					</view>
					<view class="goods-state">
						<span class="green">先用后付</span>
						<span class="gray">急速退款</span>
					</view>
					<view class="goods-sales">
						<span class="price">
							<span>￥</span>
							<span>{{item.price}}</span>
						</span>
						<span class="sales">已售1000万+件</span>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import banner from '@/components/strategy/banner.vue'
	import category from '@/components/strategy/category.vue'
	import {
		commodityList
	} from '@/utils/index';
	export default {
		data() {
			return {
				commodityList: commodityList
			}
		},
		// 引入组件
		components: {
			banner,
			category
		},
		onLoad() {
			console.log(commodityList);
		},
		methods: {
			goDetails(id) {
				uni.navigateTo({
					url: '../../pages/details/details?id=' + id + ''
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		height: calc(100vh - 45px);
		background: #f4f4f4;
	}

	.content .list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		background: #f4f4f4;
		padding: 0 10px;
	}

	.content .list .list-item {
		background: #fff;
		border-radius: 5px;
	}

	.list-item .img {
		width: 100%;
		height: 150px;
		object-fit: contain;
	}

	.list-item .goods-name {
		display: flex;
		align-items: center;
		padding: 0 5px;
	}

	.list-item .goods-name .tag {
		background: #f4d59f;
		font-size: 12px;
		border-radius: 3px;
		margin-right: 5px;
	}

	.list-item .goods-name .name {
		/* flex: 1; */
		width: 120px;
		font-size: 14px;
		word-break: break-all;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.list-item .goods-state {
		display: flex;
		align-items: center;
		font-size: 12px;
		padding: 0 5px;
		margin: 5px 0;
	}

	.list-item .goods-state .green {
		color: #4fb72f;
		margin-right: 5px;
	}

	.list-item .goods-state .gray {
		color: #ccc;
		margin-right: 5px;
	}

	.list-item .goods-sales {
		display: flex;
		align-items: center;
		font-size: 12px;
		padding: 0 5px;
	}

	.list-item .goods-sales .price {
		color: #e7402e;
		font-weight: bold;
		margin-right: 5px;
	}

	.list-item .goods-sales .price>span:nth-child(2) {
		font-size: 15px;
	}

	.list-item .goods-sales .sales {
		color: #ccc;
	}
</style>